<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对战投票</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
<style>
    .card {
        border: 0px solid;
    }
    body {
        background-size: 100% 100%;
        background-color: #eee1e1;
        background-repeat: no-repeat;
        height: 900px;
    }
    .table {
        margin: auto;
    }
    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }
    .center {
        width: 800px;
    }
    .imgs {
        border-radius: 50%;
        width: 300px;
        height: 300px;
        border: 1px solid #8a8a8a;
    }
    .card {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div style="padding-top: 150px;display: flex;justify-content: center
" id="main">

    <div>
        <div class="card"
             style="width: 33rem;background-color:#eee1e1;height:500px;display: flex;justify-content: center;align-items: center;">
            <img class="card-img-top imgs" th:src="@{${battlePlayer.playeraImg}}" alt="Card image cap">
            <div class="card-body"
                 style="display: flex;flex-direction:column;justify-content: center;align-items: center;">
                <h3 class="card-title"
                    th:text="${battlePlayer.playeraNumber}+'号-'+${battlePlayer.playeraName}"></h3>
                <p style="font-size: 22px" class="card-text" th:text="${battlePlayer.playeraSong}"></p>
            </div>
        </div>
    </div>

    <div class="center">
        <div style="height:200px;text-align: center;margin-top: 50px">
            <img th:src="@{/img/vs2.png}">
        </div>
        <div style="height:250px; display: flex;justify-content: center;align-items: flex-end">
            <div style="width: 50px;font-size:20px;height: 80px;display: flex;align-items: center;justify-content: center;">
                <span th:text="${battlePlayer.playeraTicket}"></span>
            </div>
            <div class="progress" id="progress"
                 style="border-radius: 44px;width: 800px;height: 80px;background-color: #dc3545">
                <div class="progress-bar " id="progressa" role="progressbar" style="width: 50%"
                     aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-danger" id="progressb" role="progressbar" style="width: 50%"
                     aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div style="width: 50px;height: 80px;font-size:20px;display: flex;align-items: center;justify-content: center;">
                <span th:text="${battlePlayer.playerbTicket}"></span>
            </div>

        </div>
    </div>

    <div>
        <div class="card"
             style="width: 33rem;background-color:#eee1e1;height:500px;display: flex;justify-content: center;align-items: center;">
            <img class="card-img-top imgs" th:src="@{${battlePlayer.playerbImg}}" alt="Card image cap">
            <div class="card-body"
                 style="display: flex;flex-direction:column;justify-content: center;align-items: center;">
                <h3 class="card-title"
                    th:text="${battlePlayer.playerbNumber}+'号-'+${battlePlayer.playerbName}"></h3>
                <p style="font-size: 22px" class="card-text" th:text="${battlePlayer.playerbSong}"></p>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    $(function () {
        var ticketA = [[${battlePlayer.playeraTicket}]];
        var ticketB = [[${battlePlayer.playerbTicket}]];
        var sumTicket = ticketA + ticketB;
        var percentA = ticketA / sumTicket * 100;
        var percentB = ticketB / sumTicket * 100;
        $('#main').hide();
        $('#main').fadeToggle(4000)
        $('#progressa').animate({width: percentA + '%'}, 2000, "linear");
        $('#progressb').animate({width: percentB + '%'}, 2000, "linear");
    });
</script>
</html>